<template>
  <main-wrap>
    <van-row type="flex" class="arrangeWrap">
      <van-col span="9" class="weui-cells weui-cells_radio dateListWrap">
        <label v-for="item in dateList" :key="item.id" class="weui-cell weui-check__label mycell" :class="{'selected': item.id === selectedDate, 'lightgray': item.disa}" :for="item.id">
          <div class="weui-cell__bd">
              <p>
                {{item.text}}
                <van-tag plain type="danger" v-if="item.holi">假</van-tag>
              </p>
          </div>
          <div class="weui-cell__ft">
              <input type="radio" name="radio1" :value="item.id" class="weui-check" :id="item.id" v-model="selectedDate">
              <!-- <span class="weui-icon-checked"></span> -->
          </div>
        </label>
      </van-col>
      <van-col span="15" class="memberListWrap">
        <van-cell-group>
          <van-cell v-for="item of memberList" :key="item.id" @click.native="item.editable && chgDuty(item)">
            <template slot="title">
              <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                <div class="weui-media-box__hd">
                  <img class="weui-media-box__thumb" :src="item.tx" alt="">
                </div>
                <div class="weui-media-box__bd">
                  <h4 class="weui-media-box__title fullL"><span class="partB">{{item.name}}</span><span class="partS myworktype" :id="'userwtype' + item.id">{{item.wtype}}</span></h4>
                  <p class="weui-media-box__desc fullL weui-cell_access"><span class="partB">{{item.role}}</span><span class="partS weui-cell__ft" v-if="item.editable"></span></p>
                </div>
              </a>
            </template>
          </van-cell>
        </van-cell-group>
      </van-col>
    </van-row>

    <van-actionsheet
      v-model="dutyshow"
      :actions="dutyList"
      cancel-text="取消"
      @select="onDutySelect"
    />
  </main-wrap>
</template>

<script>
import MainWrap from '@/components/mainWrap'
import { mapState } from 'vuex'
export default {
  name: 'Arrange',
  components: {
    MainWrap
  },
  data () {
    return {
      dateList: [],
      dutyList: [],
      memberList: [],

      todaystr: '',
      dutyshow: false,
      // txsrc: require('imgs/头像.png'),

      selectedDate: '',
      selectedUid: ''
    }
  },
  watch: {
    selectedDate () {
      this.getMemberList()
    }
  },
  computed: {
    ...mapState(['holidays'])
  },
  mounted () {
    this.cm.overscroll(document.querySelector('.dateListWrap'))
    this.cm.overscroll(document.querySelector('.memberListWrap'))

    this.getDateList()
    this.getDutyList()
  },
  methods: {
    getDateList () {
      var curday = new Date()
      this.todaystr = curday.getFullYear() + '-' + this.cm.dealnum(curday.getMonth() + 1) + '-' + this.cm.dealnum(curday.getDate())

      curday.setDate(curday.getDate() - 3)
      for (let i = 0; i < 30; i++) {
        curday.setDate(curday.getDate() + 1)

        let y = curday.getFullYear()
        let m = this.cm.dealnum(curday.getMonth() + 1)
        let d = this.cm.dealnum(curday.getDate())
        let w = this.cm.getweekstr(curday.getDay())

        let curdaystr = y + '-' + m + '-' + d
        let holi = false
        for (let j = 0; j < this.holidays.length; j++) {
          if (this.holidays[j].day === curdaystr) {
            holi = true
            break
          }
        }

        this.dateList.push({
          id: y + '-' + m + '-' + d,
          text: m + '月' + d + '日 · ' + w,
          // chck: i === 2,
          holi: holi,
          disa: i < 2
        })
      }

      this.selectedDate = this.dateList[2].id
    },
    getMemberList () {
      this.cm.myajax('/userInfo/work/getUserList', {
        dateValue: this.selectedDate
      }, (data) => {
        this.memberList = []
        for (let i = 0; i < data.userWorkList.length; i++) {
          const ele = data.userWorkList[i]
          this.memberList.push({
            id: ele.userId,
            name: ele.name,
            tx: this.cm.getAvatar(ele.avatarUrl),
            role: ele.roleValues,
            wtype: ele.workType ? ele.workType : '放假',
            wid: ele.workId,
            online: ele.isOnline === '1',
            editable: (this.selectedDate >= this.todaystr) && (ele.subordinate === '1')
          })
        }
      })
    },
    getDutyList () {
      this.cm.myajax('/userInfo/work/team', {}, (data) => {
        for (let i = 0; i < data.team.length; i++) {
          let ele = data.team[i]
          this.dutyList.push({
            id: ele.workType,
            name: ele.workName,
            disabled: false
          })
        }

        this.selectedDuty = this.dutyList[0].id
      })
    },
    onDutySelect (item) {
      this.dutyshow = false

      this.cm.myajax('/userInfo/work/saveUserWork', {
        userId: this.selectedUid,
        workType: item.id,
        dateValue: this.selectedDate
      }, (data) => {
        document.querySelector('#userwtype' + this.selectedUid).innerHTML = item.name
      })
    },
    chgDuty (item) {
      this.selectedUid = item.id
      this.dutyshow = true
    }
  }
}
</script>

<style lang="stylus" scoped>
.arrangeWrap >>> .van-col
  height calc(100vh)
  overflow auto
.mycell >>> .van-tag
  border 1px solid rgb(255, 68, 68)
  padding 0!important
  border-radius 50%
  width .32rem
  height .32rem
  text-align center
  line-height .32rem
.arrangeWrap >>> .van-cell:not(:last-child)::after
  left 0
.arrangeWrap >>> .van-cell
  padding 10px 5px

.arrangeWrap
  background white
  padding 0
  .weui-cells
    margin-top 0
    border-right 1px solid #e5e5e5
    &:first-child
      border-left none
    &:nth-child(2)
      text-align center
    &::before
      border-top none
    .mycell
      padding .2rem
      padding-left .1rem
      padding-right 0
      font-size .28rem
      line-height .5rem
      &::before
        border-top none
      &.selected
        color #2F7DCD
      &.disabled
        color #ccc
  .weui-media-box
    padding 0!important
    .weui-media-box__hd
      width 45px
      height 45px
      line-height 45px
      margin-right .1rem
    .weui-media-box__bd
      .weui-media-box__title
        font-size 15px
        .myworktype
          color #999
          font-size 11px
      .weui-media-box__desc
        margin-top 4px
</style>
